<template>
  <div class="home">
    <!-- 八卦区域 -->
    <div class="trigrams" :style="{transform:'rotate('+deg+'deg)'}">
      <div class="qian item" >
        <Hex :Hex=0 ></Hex>
      </div>
      <div class="kun item">
        <Hex :Hex=1></Hex>
      </div>
      <div class="zhen item">
        <Hex :Hex=2></Hex>
      </div>
       <div class="gen item">
        <Hex :Hex=3></Hex>
      </div>
      <div class="li item">
        <Hex :Hex=4></Hex>
      </div>
      <div class="kan item">
        <Hex :Hex=5></Hex>
      </div> 
      <div class="dui item">
        <Hex :Hex=6 ></Hex>
      </div>
      <div class="xun item">
        <Hex :Hex=7></Hex>
      </div>
    </div>
      <button @click="Rotate" :disabled='canclick'>点击</button>
    <div class="appear">
      <!-- 太极区 -->
      <div class="pole" v-show="isshow">
        <div class="black-r"></div>
        <div class="white-u">
          <div class="black-u"></div>
        </div>
        <div class="black-d">
          <div class="white-d"></div>
        </div>
      </div>
      <!-- 卦象区 -->
      <div
        v-for="(i,j) in newList"
        :key="j"
        class="yao">
        <template v-if='i==1'>
          <Yang></Yang>
        </template>
        <template v-else>
            <Yin></Yin>
        </template>
      </div>
      <!-- <div 
        v-for="(i,j) in NumList"
        :key="j"
        class="yao">
        <template v-if='i==1'>
          <Yang></Yang>
        </template>
        <template v-else>
            <Yin></Yin>
        </template> 
      </div>-->
    </div>
    <!-- 卦辞区 -->
    <div class="text">
      <p class="title">
        {{explain[this.Num].e}}
      </p>
      <p class="order" v-show="Num>0">
        《易经》第{{explain[this.Num].order}}卦
      </p>
      <p class="info">
        {{explain[this.Num].info}}
      </p>
    </div>
  </div>
</template>

<script>
import Hex from '@/components/Hex.vue'
import Yang from '@/components/Yang.vue'
import Yin from '@/components/Yin.vue'
export default {
  name: 'Home',
  components: {
    Hex,
    Yang,
    Yin
  },
  data(){
    return{
      // NumList:[],
      //整体旋转
      deg:0,
      //设置按钮运行时不能点击
      canclick:false,
      //用于判定爻的类型的数组
      newList:[],
      // 未运行时Num=0显示提示语
      Num:0,
      // 控制太极的显隐
      isshow:true,
      //卦辞
      explain:[
        {e:'卦'},
        //地
        {e:'坤卦',order:'二',
        info:`
          卦辞：元亨。利牝马之贞。君子有攸往，先迷，後得主，利。西南得朋，东北丧朋。安贞吉。

        `},
        {e:'复卦',order:'二十四',},
        {e:'师卦',order:'七',},
        {e:'临卦',order:'十九',},
        {e:'谦卦',order:'十五',},
        {e:'明夷卦',order:'三十六',},
        {e:'升卦',order:'四十六',},
        {e:'泰卦',order:'十一',},
        //雷
        {e:'豫卦',order:'十六',},
        {e:'震卦',order:'五十一',info:`
          
        `},
        {e:'解卦',order:'四十',},
        {e:'归妹卦',order:'五十四',},
        {e:'小过卦',order:'六十二',},
        {e:'丰卦',order:'五十五',},
        {e:'恒卦',order:'三十二',},
        {e:'大壮卦',order:'三十四',},
        //水
        {e:'比卦',order:'八',},
        {e:'屯卦',order:'三',},
        {e:'坎卦',order:'二十九',},
        {e:'节卦',order:'六十',},
        {e:'蹇卦',order:'三十九',},
        {e:'既济卦',order:'六十三',},
        {e:'井卦',order:'四十八',},
        {e:'需卦',order:'五',},
        //泽
        {e:'萃卦',order:'四十五',},
        {e:'随卦',order:'十七',},
        {e:'困卦',order:'四十七',},
        {e:'兑卦',order:'五十八',},
        {e:'咸卦',order:'三十一',},
        {e:'革卦',order:'四十九',},
        {e:'大过卦',order:'二十八',},
        {e:'夬卦',order:'四十三',},
        //山
        {e:'剥卦',order:'二十三',},
        {e:'颐卦',order:'二十七',},
        {e:'蒙卦',order:'四',},
        {e:'损卦',order:'四十一',},
        {e:'艮卦',order:'五十二',},
        {e:'贲卦',order:'二十二',},
        {e:'蛊卦',order:'十八',},
        {e:'大畜卦',order:'二十六',},
        //火
        {e:'晋卦',order:'三十五',},
        {e:'噬嗑卦',order:'二十一',},
        {e:'未济卦',order:'六十四',},
        {e:'睽卦',order:'三十八',},
        {e:'旅卦',order:'五十六',},
        {e:'离卦',order:'三十',},
        {e:'鼎卦',order:'五十',},
        {e:'大有卦',order:'十四',},
        //风
        {e:'观卦',order:'二十',},
        {e:'益卦',order:'四十二',},
        {e:'涣卦',order:'五十九',},
        {e:'中孚卦',order:'六十一',},
        {e:'渐卦',order:'五十三',},
        {e:'家人卦',order:'三十七',},
        {e:'巽卦',order:'五十七',},
        {e:'小畜卦',order:'九',},
        //天
        {e:'否卦',order:'十二',},
        {e:'无妄卦',order:'二十五',},
        {e:'讼卦',order:'六',},
        {e:'履卦',order:'十',},
        {e:'遁卦',order:'三十三',},
        {e:'同人卦',order:'十三',},
        {e:'姤卦',order:'四十四',},
        {e:'乾卦',order:'一',},
      ]
    }
  },
  methods:{
    Rotate(){
      //设置按钮不可点击
      this.canclick=true
      //太极消失
      this.isshow=false
      this.newList=[]//清空数组
      let Timer=setInterval(()=>{
        //整体角度
        this.deg+=2
        //60倍数时执行Get函数
        if(this.deg%60==0){
          this.Get()
        }
        //360°时停止旋转
        if(this.deg==360){
          clearInterval(Timer)
          //按钮恢复点击
          this.canclick=false
          this.Text()
        }
      },100)
    },
    // getNum(){
    //   let a=Math.random()
    //   a=a+''
    //   a=a.split('')
    //   a=a.slice(2,8)
    //   this.NumList=a.map(i=>i%2)
    // },
    Get(){
      // 随机数[0,1)-0.5,取值范围[0.5,1.5),floor向下取整，结果为0或1
      let a=Math.floor(Math.random()+0.5)
      // 生成随机数推入数组
      this.newList.push(a)
    },
    Text(){
      // 数组转字符串
      this.Num=this.newList.join('')
      // 字符串转数字
      this.Num=this.Num*1
      // 将二进制数字转十进制
      // 如000000转为0,此处+1为了留提示语
      this.Num=parseInt(this.Num,2)+1
    }
  }
}
</script>
<style scoped>
.home{
  width: 500px;
  height: 500px;
  position: relative;
}
/* 八卦区 */
.trigrams{
  height: 100%;
  width: 100%;
  position: relative;
}
/* 经卦位于矩形顶端，便于旋转 */
.item{
  height: 50%;
  width: 20%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  transform-origin: 50% 100% 0;
}
/* 为卦指定旋转角度 */
.kun{
  transform: rotate(180deg);
}
.zhen{
  transform: rotate(-135deg);
}
.gen{
  transform: rotate(135deg);
}
.li{
  transform: rotate(-90deg);
}
.kan{
  transform: rotate(90deg);
}
.dui{
  transform: rotate(-45deg);
}
.xun{
  transform: rotate(45deg);
}
/* 太极展示区及卦象展示区 */
.appear{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100px;
  height: 120px;
}
.yao{
  height: 20px;
}
/* 太极 */
.pole{
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: -40px;
  left: -50px;
}
.black-r{
  width: 50%;
  height: 100%;
  background-color: #000;
  position: absolute;
  right: 0;
}
.white-u,
.black-d{
  width: 50%;
  height: 50%;
  border-radius: 50%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.white-u,
.white-d{
  background-color: #fff;
}
.black-d,
.black-u{
  background-color: #000;
  bottom: 0;
}
.black-u,
.white-d{
  width: 25%;
  height: 25%;
  border-radius: 50%;
}
/* 卦辞区 */
.text{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 100%;
  top: 0;
  border:1px solid #ccc;
  border-radius: 4px;
  padding: 20%;
  box-sizing: border-box;
}
.title{
  font-weight: 700;
  font-size: 24px;
}
.order{
  font-size: 18px;
}
</style>
